// 第三方的往上靠,自己的往下靠,样式写在最后
import React, { Component } from 'react'
import Header from './components/Header';
import Footer from './components/Footer';
import List from './components/List';
import './App.css'

// 状态在哪里,操作状态的方法就在哪里
export default class App extends Component {

  // 初始化状态
  state = {
    todos:[
      {id:'001',name:'吃饭',done:true}, 
      {id:'002',name:'睡觉',done:true},
      {id:'003',name:'打代码',done:false}
    ],
  }

  // 添加todo
  addTodo = (todoobj) => {
    const {todos} = this.state
    this.setState({todos:[todoobj,...todos]})
  }

  // 根据id更新todo的状态
  updateTodo = (id,done) => {
    const {todos} = this.state
    const newTodos = todos.map((todo)=> {
      if (todo.id === id) {
        return {...todo,done}
      }else { return todo }
    })
    this.setState({todos:newTodos})
  }

  // 根据id删除todo的状态
  deleteTodo = (id)=>{
    const {todos} = this.state
    const newTodos = todos.filter( todo => todo.id !== id )
    this.setState({todos:newTodos})
  }

  // 全选或者取消全选
  checkAllTodo = (done)=>{
    const {todos} = this.state
    const newTodos = todos.map((todoobj)=>{
      return {...todoobj,done}
    })
    this.setState({todos:newTodos})
  }

  // 清除所有已完成的任务
  ClearAllDone  = ()=>{
    const {todos} = this.state
    const newTodos = todos.filter(todo=> !todo.done)
    this.setState({todos:newTodos})
  }

  render() {
    const {todos} = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <Header addTodo = {this.addTodo}/>
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
          <Footer todos={todos} checkAllTodo={this.checkAllTodo} ClearAllDone={this.ClearAllDone}/>
        </div>
    </div>
    )
  }
}
